<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="ajax.jsp"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用后台管理系统</title>

    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面主体 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .main {
            width: 600px;
            height: calc(100% - 50px);
            margin-bottom: 10px;
        }

        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 表单 */
        .form {
            width: 100%;
            overflow-y: scroll;
            max-width: 600px;
            padding: 40px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .form-item {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="file"],
        select,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 5px;
        }

        .radio-group {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }

        .radio-group input {
            margin-right: 5px;
        }

        .btn {
            display: inline-block;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            color: #fff;
            background-color: #007bff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="main">
    <fieldset>
        <legend>新增商品信息</legend>
        <form id="addForm" class="form" name="myform">
            <div class="form-item">
                <label for="goodName" class="form-label">商品名称</label>
                <input type="text" name="goodName" id="goodName" placeholder="请输入商品名称" required>
            </div>
            <div class="form-item">
                <label for="image" class="form-label">商品图片</label>
                <input type="file" name="image" id="image" placeholder="请选择图片" readonly required>
            </div>
            <div class="form-item">
                <label for="cateId" class="form-label">商品类型</label>
                <select name="cateId" id="cateId">
                    <option value="">---请选择商品类型---</option>
                    <c:forEach items="${cateList}" var="cate">
                        <option value="${cate.cateId}">${cate.cateName }</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-item">
                <label for="price" class="form-label">销售价</label>
                <input type="text" name="price" id="price" placeholder="请输入销售价" required>
            </div>
            <div class="form-item">
                <label for="recommend" class="form-label">是否推荐</label>
                <div class="radio-group">
                    <input type="radio" name="recommend" value="是" title="是" checked>
                    <label for="recommend-yes">是</label>
                    <input type="radio" name="recommend" value="否" title="否">
                    <label for="recommend-no">否</label>
                </div>
            </div>
            <div class="form-item">
                <label for="special" class="form-label">是否特价</label>
                <div class="radio-group">
                    <input type="radio" name="special" value="是" title="是" checked>
                    <label for="special-yes">是</label>
                    <input type="radio" name="special" value="否" title="否">
                    <label for="special-no">否</label>
                </div>
            </div>
            <div class="form-item">
                <label for="storage" class="form-label">库存数</label>
                <input type="text" name="storage" id="storage" placeholder="请输入库存数" required>
            </div>
            <div class="form-item">
                <label for="contents" class="form-label">商品详情</label>
                <textarea name="contents" id="contents" placeholder="请输入商品详情"></textarea>
            </div>
            <div class="form-item">
                <button type="button" class="btn" id="sub">立即提交</button>
                <button type="reset" class="btn" id="res">取消重置</button>
            </div>
            <div id="btn-msg"></div>
        </form>
    </fieldset>
</div>
<script>
    $('#sub').on('click', function (){
        let goodName = document.getElementById('goodName').value;
        let image = document.getElementById('image').value;
        let cateId = document.getElementById('cateId').value;
        let contents = document.getElementById('contents').value;
        let recommend = document.querySelector('input[name="recommend"]:checked').value;
        let price = document.getElementById('price').value;
        let special = document.querySelector('input[name="special"]:checked').value;
        let storage = document.getElementById('storage').value;
        let good = {
            goodName: goodName,
            image: image,
            cateId: cateId,
            contents: contents,
            recommend: recommend,
            price: price,
            special: special,
            storage: storage,
        };
        console.log(good);
        axiosInstance.post(
            '/good/addGood',
            good,
            {
                headers: headersJson
            }
        ).then((res)=>{
            console.log(res.data);
            if (res.data.code == 200){
                console.log("增加成功");
                document.getElementById('btn-msg').innerHTML = "增加成功";
                setTimeout(()=>{
                    document.getElementById('btn-msg').innerHTML = "";
                },2000);
            }else {
                console.log("增加失败");
                document.getElementById('btn-msg').innerHTML = "增加失败";
                setTimeout(()=>{
                    document.getElementById('btn-msg').innerHTML = "";
                },2000);
            }
        }).catch(e=>{
            console.log("增加失败");
            document.getElementById('btn-msg').innerHTML = "增加失败";
            setTimeout(()=>{
                document.getElementById('btn-msg').innerHTML = "";
            },2000);
        })
    })
</script>
</body>
</html>
